<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<view :data-theme="theme" :class="theme" :style="globalColor.style">
			<HeadCustom :isCircle="true" :isSpace="false" :isAppBtn="!isApp" :isHome="!isApp">
				<!-- <view slot="right" v-if="isApp && !preview" class="font30 lh44 opacity80 fboxRow Ycenter Xcenter action-text action-btn" @click="isAction = true"><text class="bwfont bw-dian"></text></view> -->
				<view slot="right" v-if="isApp && !preview && !isNot"
					class="lh44 opacity80 fboxRow Ycenter Xcenter action-text action-btn" @click="transmit">
					<text class="bwfont bw-zhuanfa font30"></text>
				</view>
			</HeadCustom>
		</view>
		<view v-if="isHead" :style="{ height: statusBarHeight + 'px' }"></view>
		<view v-if="isHead" style="height: 88rpx"></view>
		<HeadMore :show.sync="isAction" :list="actionList" @action="actionTap" />
		<!-- 产品展示先隐藏，暂未解决热文短链App中打开名片详情 -->
		<view class="userInfo fboxRow" v-if="detail.quoteMemberVO" @click="goApp">
			<image class="avatar" :src="detail.quoteMemberVO.imagePhoto" mode="aspectFill"></image>
			<view class="line"></view>
			<view class="fboxCol detail_msg">
				<view class="name font32 flex1">{{ detail.quoteMemberVO.realName }}</view>
				<view class="flex1 font28 user_msg mt24" v-if="detail.quoteMemberVO.companyName">
					<text class="bw-Vector8 bwfont icon_txt"></text>
					{{ detail.quoteMemberVO.companyName }}
				</view>
				<view class="flex1 font28 user_msg mt10" v-if="detail.quoteMemberVO.positionName">
					<text class="bw-a-zu3478 bwfont icon_txt"></text>
					{{ detail.quoteMemberVO.positionName }}
				</view>
			</view>
			<text class="bq-tjr fboxRow Ycenter Xcenter font28">推荐人</text>
		</view>
		<view class="article hotAricle bui-article" v-if="detail.id">
			<view class="title font38">{{ detail.title }}</view>
			<view class="info fboxRow font24">
				<text class="txt_msg">{{ detail.editTime.substring(0, 16) }}</text>
				<text v-if="detail.author" class="txt_msg">{{ detail.author }}</text>
				<text v-if="detail.articleSource" class="txt_msg">{{ detail.articleSource }}</text>
				<text class="original" @tap="original">阅读原文</text>
			</view>
			<!-- <view class="line_box"></view> -->

			<view class="detail rich_media_content">
				<view class="font32 content" v-html="detail.content"></view>
				<!-- <rich-text class="font32 content" :nodes="detail.content" @itemclick="goImgDetials">
				</rich-text> -->

				<view class="reminder font28">
					以上文章内容，不代表本无名片平台观点，内容授权、投诉请联系 benwu@benwunet.com
				</view>
			</view>
			<!-- <view class="line_box"></view> -->
			<view class="viewYy fboxRow Ycenter font28" v-if="!preview">
				<view class="flex1 fboxRow Ycenter">
					<!-- <template>
						<text>引用</text>
						<view class="yyUser flex1 fboxRow Ycenter" @click="goPage">
							<image class="img_box" :src="item.imagePhoto"
								v-for="(item, index) in detail.memberList"
								:key="index" :style="{transform: `translateX(-${index * 20 }rpx)`}" mode="aspectFill"></image>
							<view class="img_more fboxRow Ycenter Xcenter" :style="{transform: `translateX(-${detail.memberList && detail.memberList.length * 20 }rpx)`}"><u-icon name="more-dot-fill" color="#A7ABB5"></u-icon></view>
						</view>
					</template> -->
				</view>
				<view class="">阅读{{ detail.eye || 0 }}次</view>
			</view>
			<!-- <view class="hotRec"></view>
			<view class="hotRecommended font32">
				<view class="recommendedTitle">
					<view style="margin-bottom: 20rpx;">热文推荐</view>
					<view class="recommendedDetail font32 font-ell1" v-for="(item, index) in recommendedList" :key="index" @tap="$pageTo('/hotArticle/detail?id='+item.id)">{{ index + 1 }}.{{ item.title }}</view>
				</view>
			</view> -->
			<template v-if="preview">
				<u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
					<view class="btn_box fboxRow">
						<view class="flex1 font32" @tap="back">返回</view>
					</view>
				</u-tabbar>
			</template>
			<!-- <template v-if="!isApp">
				<template v-if="(pageType == 0 || userInfo.memberId != (detail.quoteMemberVO && detail.quoteMemberVO.cardId))&&pageType != 2">
					<u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
						<view class="btn_box fboxRow"><view class="flex1 font32" @tap="goQuote">我要引用</view></view>
					</u-tabbar>
				</template>
				<u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" v-if="pageType == 2 || (detail.quoteMemberVO && detail.quoteMemberVO.cardId)">
					<view class="btn_box fboxRow"><view class="flex1 font32" @tap="transmit"><text class="bwfont bw-zhuan"></text>转发</view></view>
				</u-tabbar>
			</template> -->
		</view>
		<view v-if="isNot"><not-empty :height="500" text="文章不存在或已被删除"></not-empty></view>
		<not-login ref="notLogin" />
		<!-- #ifdef H5 -->
		<FixedBtn backColor="transparent" v-if="!isApp && isHead">
			<template>
				<view class="btm-btn fboxRow Xcenter">
					<view class="btn-txt" @click="openApp">在APP中打开</view>
				</view>
			</template>
		</FixedBtn>
		<!-- #endif -->
	</view>
</template>

<script>
	import ArticleItem from './components/article-item.vue';
	import HeadMore from '@/components/head-custom/head-more.vue';
	import {
		hotTextDetail,
		hotList,
		hotQuoteDetail,
		hotQuote
	} from '@/api/h5';
	import {
		utf8to16,
		base64decode
	} from '@/static/js/Base64.js';
	import {
		getRequest,
		openAppULink
	} from '@/static/js/common.js';
	// #ifdef H5
	import {wxSdk} from '@/static/js/wxjsdk.js';
	// #endif
	import {
		getAndroidVersion
	} from '@/api/index';
	import FixedBtn from '@/components/bottom-btn/fixed.vue';
	export default {
		components: {
			ArticleItem,
			HeadMore,
			FixedBtn
		},
		name: 'aricleDetail',
		data() {
			return {
				theme: getApp().globalData.appTheme,
				globalColor: getApp().globalData.globalColor,
				isAction: false,
				actionList: [{
					label: '转发',
					value: 1,
					icon: 'bw-zhuanfa'
				}], //,{ label: '我引用的文章', value: 3,  icon: 'bw-lianjie' } { label: '收藏', value: 2 },
				detail: {},
				isApp: true,
				id: '', // '439712969060777984'
				memberId: '',
				pageType: 0, // 0 平台热文，1别人查看个人引用热文, 2个人引用热文
				preview: 0,
				recommendedList: [],
				userInfo: {},
				statusBarHeight: 0,
				shareDataId: '',
				isHead: true,
				isNot: false,
				updateAddress: ''
			};
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: '本无热文'
			});
			let token = {};
			if (option && option.benwu) {
				let benwu = utf8to16(base64decode(option.benwu));
				this.benwu = option.benwu;
				token = {
					// access_token: getRequest(benwu,'token'),
					// id: getRequest(benwu,'id'),
					statusBarHeight: getRequest(benwu, 'statusBarHeight')
					// authStatus: getRequest(benwu,'authStatus'),
				};
				if (getRequest(benwu, 'token')) {
					token.access_token = getRequest(benwu, 'token');
				}
				getApp().globalData.statusBarHeight = token.statusBarHeight;
				// this.id = token.id
				uni.setStorageSync('bw_params', JSON.stringify(token));
			}
			if (option && option.isApp) {
				this.isApp = option.isApp == 1 ? true : false;
			} else {
				const {
					bw_link
				} = getApp().getBWData(['bw_link']);
				this.isApp = bw_link.isApp == 1 ? true : false;
				this.getisApp();
			}
			if (option.pageType) {
				this.pageType = option.pageType;
			}
			if (option.preview) {
				this.preview = option.preview;
			}
			if (option.isHead) {
				this.isHead = false;
			}
			if (option.id) {
				if (option.id == 'hotArticleTemp') {
					this.detail = getApp().globalData.hotArticleTemp;
				} else {
					this.id = option.id;
					this.getDetail();
				}
			}
			// this.getRec()
			const {
				bw_user_temp,
				bw_params
			} = getApp().getBWData(['bw_user_temp', 'bw_params']);
			this.userInfo = bw_user_temp;
			this.statusBarHeight = bw_params.statusBarHeight;
			// #ifdef H5
			this.getHandler();
			// #endif
			// console.log('getSystemInfoSync',)
		},
		mounted() {
			// #ifdef H5
			window.appCallback = this.appCallback;
			// #endif
		},
		methods: {
			// 获取下载地址
			getisApp() {
				getAndroidVersion().then((res) => {
					this.updateAddress = res.data.updateAddress;
				});
			},
			// 打开app
			openApp() {
				const {
					bw_link,
					bw_user_temp
				} = getApp().getBWData(['bw_link', 'bw_user_temp']);
				const href = window.location.href;
				const obj = {
					sharerId: bw_link.sharerId,
					href: href,
					id: this.id
				};
				openAppULink('usr117fpuh5nd9ci', obj, this.updateAddress);
			},
			// 安卓
			appCallback(res) {
				console.log('appCallJS=========appCallback', res)
				this.isApp = true
				const {
					bw_link
				} = getApp().getBWData(['bw_link']);
				bw_link.isApp = 1;
				uni.setStorageSync('bw_link', JSON.stringify(bw_link));
			},
			// ios
			getHandler() {
				const data = {
					type: 'appCallJS'
				};
				this.$bridge.callHandler('recruitHandler', data, (res) => {
					console.log('appCallJS=========', res)
					this.isApp = true
					const {
						bw_link
					} = getApp().getBWData(['bw_link']);
					bw_link.isApp = 1;
					uni.setStorageSync('bw_link', JSON.stringify(bw_link));
				});
			},
			original() {
				const {
					bw_link
				} = getApp().getBWData(['bw_link']);
				if (bw_link.isApp != 1) {
					window.location.href = this.detail.url;
				} else {
					const data = {
						type: 'hotArticleDetail',
						url: this.detail.url
					};
					this.$bridge.callHandler('recruitHandler', data, () => {
						console.log('recruitHandler', '返回');
					});
				}
			},
			goImgDetials(e) {
				console.log(e);
			},
			back() {
				uni.navigateBack();
			},
			// 跳转我要引用
			goQuote() {
				const {
					bw_params
				} = getApp().getBWData(['bw_params']);
				if (bw_params.access_token) {
					this.$pageTo(
						'/hotArticle/quote?id=' + this.detail.id + '&pageType=' + this.pageType
					);
				} else {
					this.$refs.notLogin.openLogin({
						show: true,
						position: 'center'
					});
				}
			},
			// 跳转APP名片详情，跟app做交互
			goApp() {
				const {
					bw_link
				} = getApp().getBWData(['bw_link']);
				console.log('goApp跳转APP名片详情', bw_link)
				if (bw_link.isApp != 1) {
					// if (this.isApp) {
					this.$pageTo('/CardDetail', {
						id: this.detail.quoteMemberVO.cardId
					});
				} else {
					const data = {
						type: 'card',
						memberId: this.detail.quoteMemberVO.cardId
					};
					this.$bridge.callHandler('recruitHandler', data, () => {
						console.log('recruitHandler', '返回');
					});
				}
			},
			// 热文引用相关用户
			goPage() {
				const {
					bw_params
				} = getApp().getBWData(['bw_params']);
				if (bw_params.access_token) {
					this.$pageTo(`/hotArticle/userCount?id=${this.id}`);
				} else {
					this.$refs.notLogin.openLogin({
						show: true,
						position: 'center'
					});
				}
			},
			// 获取热文详情
			getDetail() {
				hotTextDetail({
						id: this.id,
						type: this.pageType == 0 ? 0 : 1
					})
					.then((res) => {
						res.data.content = res.data.content.replace('677px', '100%');
						this.detail = res.data;
						uni.setNavigationBarTitle({
							title: res.data.title
						});
						// #ifdef H5
						this.appShareData(this.id, 'meta', res.data.type);
						// #endif
					})
					.catch((err) => {
						console.log('catch', err);
						// uni.showToast({
						// 	title: JSON.stringify(err),
						// 	icon: 'none'
						// })
						this.isNot = true;
					});
			},
			// app交互传参
			appShareData(id, type, pageType) {
				const {
					content,
					title,
					img,
					quoteMemberVO,
					eye
				} = this.detail;
				let con = content.replace(/<\/?.+?>/g, '');
				const regex = /(<([^>]+)>)/gi;
				con = con.replace(/[\r\n]/g, ''); // 去除换行和tab
				con = con.replace(regex, ''); // 去除Html标签
				const href = `${location.origin}${location.pathname}#/hotArticle/detail?id=${id}&pageType=${pageType}`;
				const data = {
					type: type, // shareHotArticle || meta
					link: href,
					originalUrl: window.location.href,
					title: title,
					imgUrl: img,
					desc: con.substr(0, 50) || href,
					browseCount: eye
				};
				if (this.detail.type == 1 && quoteMemberVO) {
					const {
						realName,
						imagePhoto,
						cardId
					} = quoteMemberVO;
					data.realName = realName;
					data.avatar = imagePhoto;
					data.memberId = cardId;
				}
				this.$bridge.callHandler('appHandler', data, () => {
					console.log('appHandler', '返回');
				});
				if (type == 'meta') {
					this.$nextTick(() => {
						wxSdk.setShareData(data, {});
					});
				}
			},
			// 获取推荐列表
			getRec() {
				hotList({
					cid: 0,
					current: 1,
					size: 5
				}).then((res) => {
					this.recommendedList = res.data.list;
				});
			},
			// 热文头部操作 我引用的，转发
			actionTap(e) {
				if (e.item.value == 3) {
					this.$pageTo(`/hotArticle/hotMine`);
				} else if (e.item.value == 1) {
					this.transmit();
				}
			},
			// 转发内容
			transmit() {
				this.appShareData(this.detail.id, 'shareHotArticle', this.detail.type);
				// 全部由APP调接口做转发分享
				// 转发时自动引用文章，多次转发只执行一次
				// const { bw_user_temp, bw_params } = getApp().getBWData(['bw_user_temp', 'bw_params']);
				// if (
				// 	!bw_params.access_token ||
				// 	(this.detail.type == 1 &&
				// 		bw_user_temp &&
				// 		bw_user_temp.memberId == this.detail.quoteMemberVO.cardId)
				// ) {
				// 	this.appShareData(this.detail.id, 'shareHotArticle', this.detail.type);
				// } else {
				// 	// 分享一次之后再次分享不调接口，这样容易生成重复得分享文章
				// 	if (this.shareDataId) {
				// 		this.appShareData(this.shareDataId, 'shareHotArticle', 1);
				// 	} else {
				// 		hotQuote({ id: this.detail.id, type: this.detail.type }).then((res) => {
				// 			if (res.data) {
				// 				this.shareDataId = res.data;
				// 				this.appShareData(res.data, 'shareHotArticle', 1);
				// 			}
				// 		});
				// 	}
				// }
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page-wrap {
		min-height: calc(100vh);
		line-height: 1.6;
		overflow: hidden;
		background-color: #fff;
	}

	// *{box-sizing: border-box;}
	.bg-fff {
		background-color: #fff;
	}

	.original {
		color: #98c1e5;
	}

	.article {
		width: 750rpx;
		overflow: hidden;
	}

	.action-text {}

	.btm-btn {
		width: 100%;

		.btn-txt {
			padding: 10rpx 60rpx;
			border-radius: 30rpx;
			background: linear-gradient(180deg,
					var(--rampButtonBackStartColor) 0%,
					var(--rampButtonBackEndColor) 100%);
			color: var(--contentBgImageTitleColor);
		}
	}

	.action-btn {
		width: 56rpx;
		height: 56rpx;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 50%;
		color: #fff;
	}

	::v-deep .u-tabbar__content {
		background-color: #fff;
		border: none;

		.u-tabbar__content__item-wrapper {
			height: 120rpx;
		}
	}

	::v-deep .content {
		img {
			max-width: 100%;
			height: auto;
		}
	}

	.userInfo {
		margin: 40rpx;
		// height: 214rpx;
		max-height: 260rpx;
		border-radius: 8rpx;
		background: #fff;
		align-items: center;
		position: relative;
		overflow: hidden;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);

		.bq-tjr {
			position: absolute;
			top: 16rpx;
			right: 0;
			width: 128rpx;
			height: 54rpx;
			background: #f3e2d8;
			border-radius: 128rpx 0rpx 0rpx 128rpx;
			color: #ce763f;
			// right: -10rpx;
			// transform: rotate(45deg);
		}

		.avatar {
			height: 258rpx;
			width: 230rpx;
		}

		.line {
			position: absolute;
			left: 215rpx;
			top: 0;
			width: 40rpx;
			height: 262rpx;
			background-color: #fff;
			transform: rotate(6deg);
			z-index: 1;
		}

		.detail_msg {
			padding: 28rpx;
			height: 100%;
			position: relative;
			z-index: 2;

			.name {
				font-weight: bold;
				line-height: 44rpx;
				color: #111018;
			}

			.user_msg {
				color: #6d6d76;
				line-height: 46rpx;
				max-width: 320rpx;

				.icon_txt {
					font-size: 26rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.article {
		padding: 20rpx 0 40rpx;

		.title {
			padding: 0 40rpx;
			line-height: 54rpx;
			color: #000;
		}

		/deep/ p {
			margin: 0;
			margin-block-start: 0;
			margin-block-end: 0;
		}

		.info {
			padding: 0 40rpx 20rpx;
			color: #747986;
			margin: 18rpx 0;

			.txt_msg {
				margin-right: 28rpx;
			}
		}

		.line_box {
			height: 1px;
			background: #1e222f;
			margin: 38rpx 0;
		}

		.viewYy {
			padding: 40rpx 40rpx 0;
			color: #747986;
			justify-content: flex-end;

			.yyUser {
				height: 60rpx;
				// background: linear-gradient(91deg, var(--viewBgColor) 4%, rgba(26, 29, 37, 0.05) 99%);
				border-radius: 56rpx 56rpx 56rpx 56rpx;
				margin-left: 20rpx;
				padding-left: 10rpx;

				.img_box {
					height: 45rpx;
					width: 45rpx;
					border-radius: 50%;
				}

				.img_more {
					width: 45rpx;
					height: 45rpx;
					background: #e6e8ee;
					border-radius: 50%;
				}
			}
		}

		.detail {
			// padding-top: 40rpx;
			padding: 0 40rpx 0 40rpx;
			text-align: justify;
			min-height: calc(100vh);
			// color: var(--contentFontLightColor);
			// line-height: 44rpx;
		}

		.hotRec {
			height: 24rpx;
			background: #111018;
			margin: 32rpx 0 14rpx 0;
		}

		.hotRecommended {
			padding: 26rpx 40rpx;

			.recommendedTitle {
				font-weight: bold;
				color: #ffffff;

				.recommendedDetail {
					font-weight: 400;
					color: #747986;
					line-height: 72rpx;
				}
			}
		}

		.reminder {
			margin-top: 40rpx;
			color: #747986;
			line-height: 40rpx;
		}
	}
</style>